<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>教师登录</title>

    <!--  导入logo，重置样式文件，layui样式文件，自定义样式文件  -->
    <link rel="shortcut icon" href="/images/logo.ico">
    <link rel="stylesheet" href="/css/global.css">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/login.css">
    <link rel="stylesheet" href="/iconfont/iconfont.css">
    <!--  导入animate动画库  -->
    <link rel="stylesheet" href="/css/animate.css">

    <!--  导入layui的样式，函数库，jQuery的函数库，自己编写的js文件  -->
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery-2.2.1.js"></script>
</head>

<body>

    <!-- site-text start -->
    <div class="container">
        <div class="site-text">
            <p class="title animate__animated animate__rotateIn">育德会计后台管理 - <span>用户登录</span></p>
            <form class="layui-form layui-form-pane" id="user-form">
                <div class="layui-form-item input-item animate__animated animate__zoomInLeft">
                    <div class="layui-input-inline">
                        <i class="iconfont icon-a-usercenter-24"></i>
                        <input type="text" name="usrName" required lay-verify="required" placeholder="请输入用户名"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item  input-item animate__animated animate__zoomInRight">
                    <div class="layui-input-inline">
                        <i class="iconfont icon-password"></i>
                        <input type="password" name="usrPassword" required lay-verify="required" placeholder="请输入密码"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn animate__animated animate__fadeInBottomLeft" lay-submit
                        lay-filter="submitBtn" >登录</button>
                    <button type="reset" class="layui-btn animate__animated animate__fadeInBottomRight">重置</button>
                </div>
            </form>
        </div>
    </div>
    <!-- end site-text -->

    <!--  footer start  -->
    <div class="footer">
        <div class="copyright">育德会计培训机构版权所有 ©2025 湘ICP备08106666号-1</div>
    </div>
    <!--  end footer  -->

    <script type="text/javascript">
        layui.use(['layer', 'form','jquery'], function () {
            let layer = layui.layer;     //弹层对象
            let form = layui.form;       //表单对象
            let $ = layui.jquery;

            //提交登录
            form.on('submit(submitBtn)', function (data) {
                $.ajax('/auth/login', {
                    type: 'post',
                    contentType: 'application/json',
                    data: JSON.stringify(data.field),
                    success: function (res) {
                        if (res.code === 200) {
                            //如果前端页面采用纯静态页面，将后台响应回来的用户信息存储在前端缓存中
                            // sessionStorage.setItem(key, value); 存
                            // sessionStorage.getItem(key); 取
                            // sessionStorage.removeItem(key); 删
                            sessionStorage.setItem('userInfo', JSON.stringify(res.data));
                            //页面跳转
                            location.href = '/page/index';
                        } else {
                            layer.msg(res.message);
                        }
                    }
                });
                return false;
            });
        });
    </script>

</body>

</html>